<template>
  <div>
    <h2>{{ userLocation }}</h2>
    <p>
      <span>经度： {{ userGeolocation.longitude }}</span>
      <span>纬度： {{ userGeolocation.latitude }}</span>
    </p>
    <button @click="updateLocation">我是子组件，我改变location</button>
    <button @click="updateGeolocation">我是子组件，我改变geolocation</button>
  </div>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    const userLocation = inject("location", "The Universe");
    const userGeolocation = inject("geolocation");
    const updateLocation = inject("updateLocation");
    const updateGeolocation = inject("updateGeolocation");

    return {
      userLocation,
      userGeolocation,
      updateLocation,
      updateGeolocation,
    };
  },
};
</script>

<style>
</style>